/* 改变主题色变量 */
$--color-primary: #409eff !default;
$--color-white: #ffffff;
$--color-green: #09bba1;
:root {
  color-scheme: light;
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary: #409eff;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #f89898;
  --el-color-error-light-5: #fab6b6;
  --el-color-error-light-7: #fcd3d3;
  --el-color-error-light-8: #fde2e2;
  --el-color-error-light-9: #fef0f0;
  --el-color-error-dark-2: #c45656;
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #ffffff;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),
    0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);
  --el-overlay-color: rgba(0, 0, 0, 0.8);
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
  --el-mask-color: rgba(255, 255, 255, 0.9);
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style)
    var(--el-border-color);
  --el-svg-monochrome-grey: var(--el-border-color);
}
$--color-primary-light-1: mix(
  $--color-white,
  $--color-primary,
  10%
) !default; /* 53a8ff */
$--color-primary-light-2: mix(
  $--color-white,
  $--color-primary,
  20%
) !default; /* 66b1ff */
$--color-primary-light-3: mix(
  $--color-white,
  $--color-primary,
  30%
) !default; /* 79bbff */
$--color-primary-light-4: mix(
  $--color-white,
  $--color-primary,
  40%
) !default; /* 8cc5ff */
$--color-primary-light-5: mix(
  $--color-white,
  $--color-primary,
  50%
) !default; /* a0cfff */
$--color-primary-light-6: mix(
  $--color-white,
  $--color-primary,
  60%
) !default; /* b3d8ff */
$--color-primary-light-7: mix(
  $--color-white,
  $--color-primary,
  70%
) !default; /* c6e2ff */
$--color-primary-light-8: mix(
  $--color-white,
  $--color-primary,
  80%
) !default; /* d9ecff */
$--color-primary-light-9: mix(
  $--color-white,
  $--color-primary,
  90%
) !default; /* ecf5ff */

$--color-success: #2bbb59 !default;
$--color-warning: #ff9d2a !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;
$--color-black: #333333 !default;
$--color-gray: #999999 !default;

/* 改变 icon 字体路径变量，必需 */
// $--font-path: '~element-ui/lib/theme-chalk/fonts';

body,
html {
  margin: 0;
  #app {
    width: 100%;
    height: 100vh;
    background: #ffffff;
  }
}
.main {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
}
.container {
  width: 1360px;
  margin: 0 auto;
  height: 100%;
}

ul li {
  list-style: none;
}
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// reset element-ui css
.el-tooltip__popper {
  max-height: 500px !important;
  overflow-y: hidden;
  max-width: 240px !important;
}
.el-image-viewer__close {
  color: white !important;
}
.has-gutter {
  th {
    background-color: #f5f7fa !important;
    color: #606266;
  }
}
.el-table {
  .el-button--text {
    padding: 0;
  }
}
.horizontal-collapse-transition {
  transition: 0s width ease-in-out, 0s padding-left ease-in-out,
    0s padding-right ease-in-out !important;
}

// 自定义滚动条样式
.scrollbar {
  .el-scrollbar {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    &::-webkit-scrollbar-track-piece {
      //滚动条凹槽的颜色，还可以设置边框属性
      background-color: #f8f8f8;
    }

    &::-webkit-scrollbar {
      // 滚动条整体样式
      width: 4px; // 高宽分别对应横竖滚动条的尺寸
      height: 4px;
    }

    &::-webkit-scrollbar-thumb {
      // 滚动条里面小方块
      border-radius: 10px;
      background: #ccc;
    }

    &::-webkit-scrollbar-track {
      // 滚动条里面轨道
      border-radius: 10px;
    }
  }
}

// @import "~element-ui/packages/theme-chalk/src/index";

$colors: (primary, $--color-primary), (white, $--color-white),
  (black, $--color-black), (green, $--color-green), (gray, $--color-gray),
  (success, $--color-success), (warning, $--color-warning),
  (danger, $--color-danger), (info, $--color-info);

$names: (
    primary: $--color-primary,
  ),
  (
    white: $--color-white,
  ),
  (
    black: $--color-black,
  ),
  (
    green: $--color-green,
  ),
  (
    gray: $--color-gray,
  ),
  (
    success: $--color-success,
  ),
  (
    warning: $--color-warning,
  ),
  (
    danger: $--color-danger,
  ),
  (
    info: $--color-info,
  );
/* ----------------------------------------------------------------
  Color
----------------------------------------------------------------- */
@each $key, $name in $names {
  .color-#{$name} {
    color: $name !important;
  }
}

// @each $name,$color in  $colors {
//   .color-#{$name} {
//     color: $color !important;
//   }
// }

@each $key, $name in $names {
  .bc-#{$name} {
    background-color: $name !important;
  }
}

/* ----------------------------------------------------------------
  Border
----------------------------------------------------------------- */
@for $i from 0 through 20 {
  .br-#{$i} {
    border-radius: $i + px !important;
  }
}
/* ----------------------------------------------------------------
  Box-sizing
----------------------------------------------------------------- */
@each $sizing in unset, border-box, content-box {
  .bs-#{$sizing} {
    box-sizing: $sizing !important;
  }
}

/* ----------------------------------------------------------------
  Cursor
----------------------------------------------------------------- */
@each $cursor in default, pointer, move {
  .cursor-#{$cursor} {
    cursor: $cursor !important;
  }
}

/* ----------------------------------------------------------------
  Display
----------------------------------------------------------------- */
@each $display in block, none, inline, inline-block, flex, inline-flex {
  .display-#{$display} {
    display: $display !important;
  }
}
/* ----------------------------------------------------------------
  Flex
----------------------------------------------------------------- */
// 项目的排列方向
@each $direction in row, row-reverse, column, column-reverse {
  .fd-#{$direction} {
    flex-direction: $direction !important;
  }
}
// 项目在主轴上的对齐方式
@each $position in flex-start, flex-end, center, space-between, space-around,
  space-evenly
{
  .jc-#{$position} {
    justify-content: $position !important;
  }
}
// 占比
@for $i from 1 through 11 {
  .flex-#{$i} {
    flex: $i !important;
  }
}
// 轴线排列 换行
@each $nowrap in nowrap, wrap, wrap-reverse {
  .fw-#{$nowrap} {
    flex-wrap: $nowrap !important;
  }
}
// 项目在交叉轴上对齐方式
@each $position in flex-start, flex-end, center, baseline, stretch {
  .ai-#{$position} {
    align-items: $position !important;
  }
}
/* ----------------------------------------------------------------
  Float
----------------------------------------------------------------- */
.float-right {
  float: right !important;
}
.float-left {
  float: left !important;
}
.float-none {
  float: none !important;
}
.clearfix::before,
.clearfix::after {
  display: table;
  content: '';
}

.clearfix::after {
  clear: both;
}
/* ----------------------------------------------------------------
  List
----------------------------------------------------------------- */
ol,
ul {
  margin-top: 0;
  margin-bottom: 10px;
}

ol ol,
ol ul,
ul ol,
ul ul {
  margin-bottom: 0;
}

ul ol,
ul ul {
  list-style-type: circle;
}

.list-unstyled {
  padding-left: 0 !important;
  list-style: none !important;
}

.list-inline {
  padding-left: 0 !important;
  margin-left: -5px !important;
  list-style: none !important;
}
/* ----------------------------------------------------------------
  Position
----------------------------------------------------------------- */
@each $position in relative, absolute, fixed, static, inherit {
  .position-#{$position} {
    position: $position;
  }
}
@for $i from 0 through 20 {
  .top-#{$i} {
    top: $i + px;
  }
  .right-#{$i} {
    right: $i + px;
  }
  .bottom-#{$i} {
    bottom: $i + px;
  }
  .left-#{$i} {
    left: $i + px;
  }
}
@for $i from 1 through 10 {
  .top-percent-#{$i} {
    top: 10% * $i;
  }
  .right-percent-#{$i} {
    right: 10% * $i;
  }
  .bottom-percent-#{$i} {
    bottom: 10% * $i;
  }
  .left-percent-#{$i} {
    left: 10% * $i;
  }
}
/* ----------------------------------------------------------------
  Sizing
----------------------------------------------------------------- */
@for $i from 1 through 20 {
  .width-percent-#{$i * 5} {
    width: 5 * 1% * $i !important;
  }
}
@for $i from 0 through 20 {
  .width-#{$i * 10} {
    width: 10px * $i !important;
  }
}
@for $i from 1 through 20 {
  .height-percent-#{$i * 5} {
    height: 5 * 1% * $i;
  }
}
@for $i from 0 through 20 {
  .height-#{$i * 10} {
    height: 10px * $i !important;
  }
}
@for $i from 1 through 50 {
  .lh-#{$i} {
    line-height: 1px * $i !important;
  }
}
/* ----------------------------------------------------------------
  Spacing
----------------------------------------------------------------- */
@for $i from 0 through 15 {
  .margin-#{$i * 2} {
    margin: 2 * $i + px !important;
  }
}
@for $i from 0 through 15 {
  .mt-#{$i * 2} {
    margin-top: 2 * $i + px !important;
  }
}
@for $i from 0 through 15 {
  .mb-#{$i * 2} {
    margin-bottom: 2 * $i + px !important;
  }
}
@for $i from 0 through 15 {
  .ml-#{$i *2 } {
    margin-left: 2 * $i + px !important;
  }
}
@for $i from 0 through 15 {
  .mr-#{$i * 2} {
    margin-right: 2 * $i + px !important;
  }
}
@for $i from 0 through 15 {
  .padding-#{$i * 2} {
    padding: 2 * $i + px !important;
  }
}
@for $i from 0 through 15 {
  .pt-#{$i * 2 } {
    padding-top: 2 * $i + px !important;
  }
}
@for $i from 0 through 15 {
  .pb-#{$i * 2 } {
    padding-bottom: 2 * $i + px !important;
  }
}
@for $i from 0 through 20 {
  .pl-#{$i * 2 } {
    padding-left: 2 * $i + px !important;
  }
}
@for $i from 0 through 20 {
  .pr-#{$i *2 } {
    padding-right: 2 * $i + px !important;
  }
}
.mr-auto {
  margin-right: auto !important;
}
.ml-auto {
  margin-left: auto !important;
}
/* ----------------------------------------------------------------
  Text
----------------------------------------------------------------- */
@each $align in center, left, right, justify {
  .ta-#{$align} {
    text-align: $align !important;
  }
}
@for $i from 6 through 18 {
  .fs-#{$i * 2} {
    font-size: 2 * $i + px !important;
  }
}
.fw-bolder {
  font-weight: bolder;
}
.fw-normal {
  font-weight: normal;
}
/* ----------------------------------------------------------------
  Vertical alignment
----------------------------------------------------------------- */
@each $align in baseline, top, middle, bottom, text-top, text-bottom {
  .va-#{$align} {
    vertical-align: $align !important;
  }
}
/* ----------------------------------------------------------------
  Visibility
----------------------------------------------------------------- */
.visibility-visible {
  visibility: visible !important;
}
.visibility-hidden {
  visibility: hidden !important;
}

/* ----------------------------------------------------------------
  Z-index
----------------------------------------------------------------- */
@for $i from 0 through 20 {
  .zi-#{$i} {
    z-index: $i !important;
  }
}
.nav {
  color: #333333;
  font-size: 16px;
  cursor: pointer;
  i {
    margin-right: 16px;
  }
}
.button {
  cursor: pointer;
  width: 80px;
  height: 28px;
  line-height: 28px;
  background: #3bbba1;
  border-radius: 14px;
  color: #ffffff;
  text-align: center;
  margin-right: 10px;
  &:hover {
    background: #48d1cc;
    border-color: #48d1cc;
    color: #fff;
  }
}

/* 鼠标置入浮动效果-s */
.suspension {
  transition: all 0.3s ease;
}
.suspension:hover {
  -webkit-transform: translateY(-4px) scale(1.02);
  -moz-transform: translateY(-4px) scale(1.02);
  -ms-transform: translateY(-4px) scale(1.02);
  -o-transform: translateY(-4px) scale(1.02);
  transform: translateY(-4px) scale(1.02);
  -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
  z-index: 999;
  border-radius: 6px;
}
/* 鼠标置入浮动效果-e */

.el-popper.is-dark {
  max-width: 400px !important;
  line-height: 24px;
  color: #fff !important;
  // background-color: rgb(48, 65, 86) !important;
}
